<template>
    <div class="container options">
       <div class="pc-box">
         <div class="options_title l-f l-row-sb">
            <p class="options_title_label">{{$t('header.optionTrading')}}</p>
            <a-button @click="onHistory" class="options_title_btn pc-box">{{$t('aiTrading.tradeHistory')}}</a-button>
        </div>
       </div>
       <!-- h5 -->
       <div class="h5-box">
            <div class="options_title">
                <p class="options_title_label">Tether Gold {{$t('option.market')}}</p>
                <p class="options_title_desc">{{$t('header.optionTrading')}}</p>
            </div>
            <Tabs :current="0" />
       </div>
        <div class="options_content l-f l-col-stretch">
            <div class="options_content_left pc-box">
                <FormBox @submit="onSubmit" ref="formRef" />
            </div>
            <div class="options_content_right">
                <EChartLine />
            </div>
        </div>
        <!-- 优势 -->
         <div class="advantage pc-box">
            <div class="advantage_question">
                <p class="advantage_question_title">{{$t('option.whatIsOptionTrading')}}</p>
                <p class="advantage_question_desc">{{$t('option.whatIsOptionTradingDesc')}}</p>
            </div>
            <div class="advantage_title">{{$t('option.advantages')}}</div>
            <div class="advantage_list">
                <div class="advantage_list_item" v-for="(item,index) in advantageList" :key="index">
                    <div class="advantage_list_item_title l-f">
                        <img class="advantage_list_item_title_icon" src="@/assets/icons/icon-advantage.svg" />
                        <p class="advantage_list_item_title_label">{{item.title}}</p>
                    </div>
                    <p class="advantage_list_item_desc">{{item.desc}}</p>
                </div>
            </div>
         </div>
         <div class="h5-box">
            <QuestionBox @click="onQuestion" :title="$t('option.whatIsOptionTrading')" :desc="$t('option.startLearningNow')" />
            <div class="options_info">
                <p class="options_info_title">Tether Gold</p>
                <div class="options_info_box l-f l-row-sb">
                    <p class="options_info_box_close">{{dayMarket.close}}</p>
                    <div class="l-f l-row-end">
                         <img v-if="isUp(dayMarket.change)" class="options_info_box_icon" src="@/assets/icons/icon-coin_up.svg" alt="">
                                <img v-else class="options_info_box_icon" src="@/assets/icons/icon-coin_down.svg" alt="">
                        <p class="options_info_box_rate" :class="isUp(dayMarket.change) ? 'color-green' : 'color-red'">{{dayMarket.change}}%</p>
                    </div>
                </div>
                <div class="options_info_btns l-f">
                    <a-button
                        @click="onBuy(1)"
                        class="options_info_btns_item bg-green"
                        type="primary"
                        >{{ $t("option.buyLong") }}</a-button
                    >
                    <a-button
                        @click="onBuy(2)"
                        class="options_info_btns_item bg-red"
                        type="primary"
                        >{{ $t("option.buyShort") }}</a-button
                    >
                </div>
            </div>
         </div>
         <!-- 订单 -->
          <!-- <div class="orders">
            <a-tabs @change="tabChange" class="orders_tabs">
                <a-tab-pane key="0" :tab="$t('account.positions')">
                  <div class="orders_scroll">
                  </div>
                </a-tab-pane>
                <a-tab-pane key="1" :tab="$t('account.openOrders')">
                  <div class="orders_scroll">
                  </div>
                </a-tab-pane>
              </a-tabs>
          </div> -->
    </div>

    <!-- 购买弹窗 -->
     <div class="h5-box">
        <div class="popup" v-if="isOpen" @click="onHidePopup" >
        <div class="popup_inner">
            <div class="l-f l-row-c">
                <p class="popup_inner_line"></p>
            </div>
            <FormBox @submit="onSubmit" ref="formRef" />
        </div>
        </div>
     </div>

</template>

<script setup>
    import { ref, computed } from 'vue'
    import { useI18n } from 'vue-i18n'
    import { useRouter } from 'vue-router'
    import { COIN } from '@/common/index.js'
    import { postSecondsApi } from '@/api/tradeApi.js'
    import { useMainStore } from '@/store'
    import { isUp, numberFormat } from '@/utils/index.js'

    import EChartLine from '@/components/eChartLine/index.vue'
    import FormBox from './components/formBox/index.vue'
    import Tabs from './components/tabs/index.vue'
    import QuestionBox from '@/components/questionBox/index.vue'
    
    const { t } = useI18n()
    const router = useRouter()
    const mainStore = useMainStore()
    
    const formRef = ref(null)

    const dayMarket = computed(() => {
        return mainStore.dayMarket
    })

    const advantageList = computed(() => {
        return [
            {
                title: t('option.multipleExpiryTimes'),
                desc: t('option.multipleExpiryTimesDesc'),
            },
            {
                title: t('option.realTimeQuotes'),
                desc: t('option.realTimeQuotesDesc'),
            },
            {
                title: t('option.lowTransactionCosts'),
                desc: t('option.lowTransactionCostsDesc'),
            },
            {
                title: t('option.betterConfidentiality'),
                desc: t('option.betterConfidentialityDesc'),
            }
        ]
    })
   
    const isOpen = ref(false)
    const currentType = ref(1)

    const onBuy = (index) => {
        currentType.value = index
        isOpen.value = true
    }

    const onHidePopup = () => {
        isOpen.value = false
    }

    const onQuestion = () => {
        router.push('/optionTradingAdvantages')
    }

    const onHistory = () => {
        router.push({name: 'record', params: {
            index: 1
        }})
    }

    const onSubmit = async (obj) => {
        let type = 1
        if(obj.type == 0 ) {
            type = currentType.value
        }else {
            type = obj.type
        }
        const res = await postSecondsApi({
            currency_id: COIN.id,
            type,
            seconds: obj.second,
            number: obj.number
        })
         mainStore.getUserBalance()
        formRef.value.setResult(res)
        if(obj.type === 3) {
            onHidePopup()
        }
    }

</script>

<style lang="scss" scoped>
@import url("./index.scss");
</style>